<script setup lang="ts">
import { defineProps, PropType } from 'vue';
import type { ISocketUser } from '../../type';
import type { IUser } from './type';

const emits = defineEmits(['clickUser']);
defineProps({
	// 聊天室在线列表
	userList: {
		type: Array as PropType<ISocketUser[]>,
		required: true,
		default: () => [],
	},
});

// 事件委托 点击用户列表
const onUserList = (e: Event) => {
	const dom: HTMLElement = e.target as HTMLElement;
	if (dom?.children?.length > 1) return;
	const user: IUser = {
		id: dom.dataset.id!,
		name: dom.innerText,
		avatar: (dom.firstChild as any).src,
	};
	emits('clickUser', user);
};
</script>

<template>
	<div class="user-list">
		<transition-group tag="ul" name="msg" @click="onUserList">
			<template v-for="user in userList" :key="user.id">
				<li :data-id="user.id">
					<img :src="user.avatar" />
					{{ user.name }}
				</li>
			</template>
		</transition-group>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
